<template>
    <body id="header">
        <div>
            <Menu mode="horizontal" :theme="theme1" active-name="1" @on-select="getIndex">
                <MenuItem style="margin-left:5%" name="1">
                    <Icon type="ios-paper" />
                    文字
                </MenuItem>
                <MenuItem name="2">
                    <Icon type="ios-list-box" />
                    表格
                </MenuItem> 
                <MenuItem name="3">
                    <Icon type="ios-list-box" />
                    演示
                </MenuItem> 
            </Menu>
        </div>
        <div class="content">
            <wps v-if="isWin&&index==1"></wps>
            <wpslinux v-if="!isWin&&index==1"></wpslinux>
            <et v-if="index==2"></et>
            <wpp v-if="index==3"></wpp>
        </div>
    </body>
</template>

<script>
import wps from '@/components/wps'
import et from '@/components/et'
import Wpp from '@/components/wpp'
import wpslinux from '@/components/wps-linux'

let isWin = (navigator.platform=="Win32") || (navigator.platform=="Windows");
export default {
    name: "demo",
    components: {wps,et,Wpp, wpslinux},
    data() {
        return {
            theme1: 'dark',
            index: 1,
            isWin
        }
    },
    methods: {
        getIndex(e) {
            this.index = e;
            console.log(this.index);
        }
    }
}
</script>

<style scoped>
body {
    margin: 0px
}
#header {
    background-position: center;
    height: 100%;
    width: 100%;
    position: fixed;
}

.content {
    height: 100%;
}
</style>